<template>
  <div class="outer">
    <h2>姓名：{{ name }}</h2>
    <h3>年龄：{{ age }}</h3>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        名称：{{ item.name }}，地址：{{ item.address }}
      </li>
    </ul>
    <el-button @click="changeArr" type="primary">测试数组增删</el-button>
    <slot :age="age">
      {{ name }}
    </slot>
    <slot name="header">这里是默认值</slot>
    <slot name="footer">这里是默认值</slot>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      age: 18,
      arr: [
        { name: "测试一", address: "江苏苏州" },
        { name: "测试二", address: "江苏苏州" },
        { name: "测试三", address: "江苏苏州" },
      ],
    };
  },
  methods: {
    changeArr() {
      this.arr.push({ name: "测试四", address: "test" });
      pubsub.publish("hhh", "我的心真的受伤了");
    },
  },
};
</script>

<style lang='less' scoped>
.outer {
  background-color: #bfa;
  padding: 10px;
  h2 {
    color: #fff;

    &::selection {
      background-color: orange;
    }
  }
}
</style>